<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:pe="http://primefaces.org/ui/extensions"
	xmlns:f="http://java.sun.com/jsf/core">

	<p:dialog id="newParticipantPopUp" resizable="false" closable="false"
		header="#{msg['message.ide.competitor.agregarParticipante']}"
		widgetVar="newParticipant" modal="true">

		<p:messages id="nuevoParticipante" autoUpdate="true" closable="true" />

		<h:panelGrid id="panelCaptura" columns="2" style="text-align:right">
			<p:outputLabel value="#{msg['message.ide.competitor.numeroControl']}"
				style="font-size: 10px; font-weight:bold;" />
			<h:panelGrid style="text-align:left">
				<p:inputMask id="numeroControlPopUpField"
					value="#{registraIdeaMB.nuevoParticipante.persona.persona}"
					style="width:150px; font-size: 10px;border-style:none;"
					disabled="#{registraIdeaMB.deshabilitarBusquedaParaEdicion}">
					<p:ajax event="keyup" listener="#{registraIdeaMB.findPersona}" />
				</p:inputMask>
			</h:panelGrid>

			<p:outputLabel
				value="#{msg['message.ide.competitor.nombreCompleto']}"
				style="font-size: 10px; font-weight:bold;" />
			<h:panelGrid style="text-align:left">
				<p:inputText readonly="true" id="nombreCompletoPopUpField"
					value="#{registraIdeaMB.nuevoParticipante.persona.nombreCompleto}"
					style="width:150px; font-size: 10px; border-style:none;" />
			</h:panelGrid>

			<p:outputLabel value="#{msg['message.ide.competitor.centroCostos']}"
				style="font-size: 10px; font-weight:bold;" />
			<h:panelGrid style="text-align:left">
				<p:inputMask readonly="true" id="centroCostosPopUpField"
					value="#{registraIdeaMB.nuevoParticipante.centroCostos}"
					style="width:150px; font-size: 10px; border-style:none;" />
			</h:panelGrid>

			<p:outputLabel value="#{msg['message.ide.competitor.area']}"
				style="font-size: 10px; font-weight:bold;" />
			<h:panelGrid style="text-align:left">
				<p:inputText value="#{registraIdeaMB.nuevoParticipante.area}"
					style="width:150px; font-size: 10px; border-style:none;"
					readonly="true" id="areaPopUpField" />
			</h:panelGrid>

			<p:outputLabel value="#{msg['message.ide.competitor.titular']}"
				style="font-size: 10px; font-weight:bold;" />
			<h:panelGrid columns="2" style="text-align:left">

				<p:selectBooleanCheckbox id="checkBoxTitular"
					value="#{registraIdeaMB.nuevoParticipante.titular}" itemLabel="Si"
					disabled="#{registraIdeaMB.enableDisableCheckBoxForKindOfUser}">
					<p:ajax
						listener="#{registraIdeaMB.seleccionarParticipanteAsTitular}" />
				</p:selectBooleanCheckbox>

				<p:selectBooleanCheckbox id="checkBoxParticipante"
					value="#{registraIdeaMB.participante}" itemLabel="No"
					disabled="#{registraIdeaMB.enableDisableCheckBoxForKindOfUser}">
					<p:ajax
						listener="#{registraIdeaMB.seleccionarParticipanteAsColaborador}" />
				</p:selectBooleanCheckbox>
			</h:panelGrid>

			<p:outputLabel value="#{msg['message.ide.competitor.celular']}"
				style="font-size: 10px; font-weight:bold;" />
			<h:panelGrid style="text-align:left">
				<p:inputMask id="handy"
					value="#{registraIdeaMB.nuevoParticipante.celular}"
					mask="(999) 999-9999999"
					disabled="#{registraIdeaMB.renderHandyField}"
					style="width:150px; font-size: 10px;border-style:none;" />

			</h:panelGrid>

			<p:outputLabel value="#{msg['message.ide.competitor.email']}"
				style="font-size: 10px; font-weight:bold;" />
			<h:panelGrid style="text-align:left">
				<p:inputText id="email"
					value="#{registraIdeaMB.nuevoParticipante.email}"
					disabled="#{registraIdeaMB.renderHandyField}"
					style="width:150px; font-size: 10px;border-style:none;"
					validatorMessage="Invalid email format">
					<f:validateRegex
						pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$" />
				</p:inputText>

			</h:panelGrid>

			<p:outputLabel value="#{msg['message.ide.competitor.extension']}"
				style="font-size: 10px; font-weight:bold;" />
			<h:panelGrid style="text-align:left">
				<p:inputMask id="extension"
					value="#{registraIdeaMB.nuevoParticipante.extension}"
					style="width:150px; font-size: 10px; border-style:none;"
					disabled="#{registraIdeaMB.renderHandyField}"
					mask="(999) 999-9999? x99999" />
			</h:panelGrid>

			<p:outputLabel value="#{msg['message.ide.competitor.ubicacion']}"
				style="font-size: 10px; font-weight:bold;" />
			<h:panelGrid style="text-align:left">
				<p:inputText id="location"
					value="#{registraIdeaMB.nuevoParticipante.ubicacion}"
					style="width:150px; font-size: 10px; border-style:none;" />

			</h:panelGrid>

			<p:outputLabel value="#{msg['message.ide.competitor.participacion']}"
				style="font-size: 10px; font-weight:bold;" />
			<h:panelGrid style="text-align:left">
				<p:inputText id="porcentageParticipacion"
					value="#{registraIdeaMB.nuevoParticipante.porcentaje}"
					style="width:150px; font-size: 10px;border-style:none;"
					validatorMessage="Ingrese un porcentaje válido">
					<f:convertNumber type="number" maxIntegerDigits="3"
						maxFractionDigits="2" groupingUsed="false" />
				</p:inputText>
			</h:panelGrid>
		</h:panelGrid>
		<h:panelGrid columns="2" style="text-alig:center">
			<p:commandButton id="agregarActualizar"
				process="@this, newParticipantPopUp"
				action="#{registraIdeaMB.registrarParticipanteFromPopUp}"
				value="#{registraIdeaMB.agregarActualizar}"
				style="font-size: 10px; font-weight:bold;"
				update="tablaParticipantes" />

			<p:commandButton id="cancelar" 
				process="@this, newParticipantPopUp"
				action="#{registraIdeaMB.cancelarRegistroParticipanteFromPopUp}"
				value="Cancelar"
				style="font-size: 10px; font-weight:bold;"
				update="tablaParticipantes" />				
		</h:panelGrid>
	</p:dialog>

</ui:composition>